<template>
    <div>
        <slide-bottom
            @clickBord="clickBord"
            ref="sildeBottom"
            v-if="cancleBoxShow"
        >
            <div class="cancle-attention-box">
                <div class="cancle-attention-text">
                    <div class="cancle-warn-text">确定要取消关注商家吗？</div>
                    <div
                        class="cancle-attention-btn"
                        @click="sureCancleAttetion"
                    >取消关注</div>
                </div>
                <div
                    class="cancle-btn"
                    @click="clickBord"
                >
                    取消
                </div>
            </div>
        </slide-bottom>
    </div>
</template>

<script>
export default {
    name: "CloseCancleBtns",
    props: {
        cancleMsgProp: Object
    },
    data () {
        return {
            cancleBoxShow: false,
            cancleMsg: {
                cancleId: 0,//取消关注的id
                belongSwiperIndex: 0,//swiperIndex;
            }
        }
    },
    mounted () {
        this.cancleMsg = Object.assign({}, this.cancleMsg, this.cancleMsgProp);
    },
    methods: {
        sureCancleAttetion () {
            let that = this;
            let sureCancleObj = {
                cancleId: this.cancleMsg.cancleId,
                belongSwiperIndex: this.cancleMsg.belongSwiperIndex
            };
            this.$emit('sureCancle', sureCancleObj, that.clickBord);
        },
        clickBord () {
            let that = this;
            that.$refs.sildeBottom.clickBord();
            setTimeout(() => {
                that.cancleBoxShow = false;
            }, 300);
        },
        showSlideBottom () {
            this.cancleBoxShow = true;
            if (this.$refs.sildeBottom) {
                this.$refs.sildeBottom.showSlideBottom();
            }
        }
    },
    watch: {
        cancleMsgProp (val) {
            this.cancleMsg = Object.assign({}, this.cancleMsg, val);
        }
    },
    components: {
        'slide-bottom': () => import('../../commonComponents/slideBottom/SlideBottom'),
    }
}
</script>

<style scoped lang="scss">
.cancle-attention-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
.cancle-attention-text {
    width: 90%;
    border-radius: 0.08rem;
    color: #fff;
    height: 1.2rem;
    background-color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.9rem;
    margin: auto;
}
.cancle-warn-text,
.cancle-attention-btn,
.cancle-btn {
    text-align: center;
    height: 0.6rem;
    line-height: 0.6rem;
    color: #939599;
    font-size: 0.16rem;
    border-bottom: 1px solid #e6e9f0;
}
.cancle-attention-btn {
    color: #ff4242;
    border-radius: 0.08rem;
    background-color: #fff;
}
.cancle-btn {
    width: 90%;
    border-radius: 0.08rem;
    background-color: #fff;
    color: #313233;
    position: absolute;
    left: 0;
    bottom: 0.16rem;
    right: 0;
    margin: 0.1rem auto auto;
}
</style>